<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="antd.min.css">
    <script src="vue.min.js"></script>
    <script src="antd.min.js"></script>
</head>
<body>
    <div>
        <div id="app" style="width: 400px;margin-left: 500px;">
        <p><h1>人力资源管理</h1></p>
        <p>姓名：<a-input placeholder="请输入姓名......." type="text" v-model="emp.username"></a-input></p>
        <p>性别：<a-radio-group v-model="emp.sex">
            <a-radio value="男">男</a-radio>
            <a-radio value="女">女</a-radio>
        </a-radio-group>
    </p>
    <p>学历：
        <a-select v-model="emp.educ">
          <a-select-option key="edu" value="" v-for="edu in edus">{{edu}}</a-select-option>
        </a-select>
    </p>
    <p>
        邮件：<a-input type="email" placeholder="请输入邮箱" v-model="emp.email"></a-input>
    </p>
    <p>
        备注：<a-input type="textarea" placeholder="请输入备注" v-model="emp.remark"></a-input>
    </p>
    <p><a-button type="primary" @click="save()">保存</a-button></p>
    </div> 
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                emp:{
                    username:"",
                    sex:"男",
                    educ:"大学",
                    email:"",
                    remark:""
                },
                edus:["专科","本科","博士"]
            },
            methods: {
                save:function(){
                    this.$message.success("保存成功");
                }
            }
        })
    </script>
</body>
</html>